<template>
    <section class="after-sale-logistics-main base-main">

      <!--填写物流信息-->
      <div class="cell-box mt10 fs14 bgcFFF">
        <p class="line-bottom pr">
          <span class="inline-block">
            物流公司
          </span>
          <span class="company-box inline-block" :class="logisticsCompanyId ? 'color45454D' : 'colorB3B3B3'" @click="handleCompany">{{logisticsCompany}}</span>
          <i class="triangle fs12 pa iconfont" :class="show ? 'iconiconfontordinaryshangjiantou-copy' : 'iconiconfontordinaryshangjiantou-copy-copy'"></i>
        </p>
        <p>
          <span class="inline-block">
            物流单号
          </span>
          <input type="number" v-model="logisticsNumber" placeholder="请填写物流单号">
        </p>
      </div>
      <!--填写物流信息-->

      <!--上传图片-->
      <div class="voucher-box mt10 pdlr15">
        <p class="head fs14 color45454D">
          上传图片：
        </p>

        <!--图片凭证-->
        <div class="pic-box">
          <span
            class="pr inline-block img-box"
            v-for="(item,index) in imgList" :key="index"
            :class="(index == imgList.length -1) ? 'mr0' : ''"
          >
            <img :src="item" alt="" @click="handleImgPreview(index)">
            <van-icon
              class="close-btn inline-block pa fs20" name="clear"
              @click="handleDel(index)"/>
          </span>

          <!--上传按钮-->
          <van-uploader
            v-if="imgList.length < 4"
            :class="imgList.length > 0 ? 'ml10' : ''"
            class="uploader-box text-c"
            :after-read="onRead"
            multiple>
            <i class="iconfont iconshumajiadian"></i>
            <p class="fs10"> {{imgList.length}}/4 </p>
          </van-uploader>
          <!--上传按钮-->
        </div>
        <!--图片凭证-->
      </div>
      <!--上传图片-->

      <div class="btn pa bgcFFF">
        <span class="base-btn-refund fs15" @click="handleSave">保存</span>
      </div>

      <van-actionsheet
        v-model="show"
        title="选择快递公司"
        @select="onSelect"
      >
        <van-cell-group>
          <van-cell v-for="(item,index) in logisticsList" :key="index" :value="item.name" @click="onSelect(item)"/>
        </van-cell-group>
      </van-actionsheet>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        logisticsList:[
          {
            id:1,
            name:'顺丰'
          },
          {
            id:2,
            name:'韵达'
          }
        ],
        logisticsCompany:'请选择',
        logisticsCompanyId:'',
        logisticsNumber:'',
        imgList:[],
        show:false,
      }
    },
    created(){
      this.$nextTick(function(){
        $('.uploader-box').css('height',$('.uploader-box').width())
      })
    },
    methods: {
      handleCompany(){
        this.show = !this.show
      },
      onSelect(item) {
        // 点击选项时默认不会关闭菜单，可以手动关闭
        this.show = false;
        console.log(item);
        this.$toast(item.name);
        this.logisticsCompany = item.name
        this.logisticsCompanyId = item.id
      },
      onRead(file) {
//        console.log(file)
        if(this.imgList.length < 4){
          this.imgList.push(file.content)
        }
      },
      //预览
      handleImgPreview(index){
        ImagePreview({
          images: this.imgList,
          startPosition: index,
          onClose() {
            // do something
          }
        });
      },
      //删除
      handleDel(index){
        this.$dialog.confirm({
          title: '删除',
          message: '确定删除这张图片吗？'
        }).then(() => {
          this.imgList.splice(index,1);
          this.$toast('删除成功')
        }).catch(() => {
        });
      },
      handleSave(){
        if(this.logisticsCompany == ''){
          this.$toast('请填写物流公司')
          return false;
        }else if(this.logisticsNumber == ''){
          this.$toast('请填写物流单号')
          return false;
        }else if(this.imgList.length <= 0){
          this.$toast('请上传物流单凭证')
          return false;
        }else{
          this.$toast('提交成功')
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/afterSaleLogistics.scss';
</style>
